<script setup lang="ts">
import { computed } from 'vue';
import type { MarkerInfo } from './types';

interface Props {
  info: MarkerInfo;
}

const { info } = defineProps<Props>();

const latlng = computed(() => {
  return `${info.lat || '-'} , ${info.lng || '-'}`;
});
</script>

<template>
  <NForm label-placement="left" :label-width="100" :show-feedback="false">
    <NGrid :cols="1">
      <NFormItemGi label="所在城市：">{{ info.detail.deviceCity }}</NFormItemGi>
      <NFormItemGi label="经纬度：">{{ latlng }}</NFormItemGi>
      <NFormItemGi label="保护子网：">{{ info.detail.protectedSubnet }}</NFormItemGi>
    </NGrid>
  </NForm>
</template>

<style lang="scss" scoped></style>
